<template>
<div>

	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				角色列表
			</div>
		</div>
	</div>

	<el-row class="bbg1 text-right">
	<el-form :inline="true" :model="form" >
		<el-form-item>
		    <el-button type="success" @click="add" style="background:#19A65B;width:140px;border:1px solid rgba(31, 231, 124);">创建</el-button>
		</el-form-item>
	</el-form>
	</el-row>


	<el-row class="bbg2 pl45">
	<el-table
	:data="roleList"
	:header-cell-style="{
		'background-color': '#169098',
	    'color': '#fff',    
	}"
	border
    height="800"
    :row-style="{
    	height : '67px'
    }"
    style="width: 1800px; background:#083749; margin-bottom:40px;">
		<el-table-column
		  label="角色名称"
		  align="center"
		  >
		  <template slot-scope="scope">
		  	<div>{{scope.row.role_name}}</div>
		  </template>
		</el-table-column>
		<el-table-column
		  label="角色id"
		  align="center"
		  >
		  <template slot-scope="scope">
		  	<div>{{scope.row.role_id}}</div>
		  </template>
		</el-table-column>
		<!-- <el-table-column
		  label="角色等级"
		  width="200">
		  <template slot-scope="scope">
		  	<div>{{scope.row.grid_level}}</div>
		  </template>
		</el-table-column> -->
		<el-table-column
		  align="center"
		  label="操作"
		  >
		  <template slot-scope="scope">
		  	<el-button type="primary" size="mini" @click="menu(scope.row, scope.row.role_id)"
		  	style="width:100px;background:rgba(11,122,227,1);border:1px solid rgba(11, 178, 248, 1);"
		  	>配置菜单</el-button>
		  	<el-button type="success" size="mini" @click="edit(scope.row)"
		  	style="width:100px;background:rgba(139,193,81,1);border:1px solid rgba(31, 231, 124, 1);"

		  	>编 辑</el-button>
		  	<el-button 
		  	v-if="scope.row.role_id != 'admin' 
		  	   && scope.row.role_id != 'clbm' 
		  	   && scope.row.role_id != 'wgy' 
		  	   && scope.row.role_id != 'xjwgz'
		  	   && scope.row.role_id != 'zjwgz'
		  	   && scope.row.role_id != 'sjwgz' "
		  	type="danger" size="mini" @click="del(scope.row.role_id)"
		  	style="width:100px;"
		  	>
		  	删除</el-button>
		  </template>
		</el-table-column>
	</el-table>
	</el-row>


<el-dialog
  :title="'配置 ' + current.role_name + ' 的菜单'"
  :visible.sync="menuDialogVisible"
  width="600px">
  <el-tabs tab-position="left" >
    <el-tab-pane :label="item.name"
	v-for="(item, index) in treedata" :key="index"
    >
    	<el-tree :data="item.children" 
		@node-click="handleNodeClick"
		class="tree"
		node-key="id"
		default-expand-all
		:indent="40"
		:expand-on-click-node="false"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span style="width:200px;"> 
					{{ data.name }} 
					<i class="el-icon-check"
					style="color:#25f0de;" 
					v-if="data.state == '1'"
					></i>
					<i class="el-icon-close red"
					v-else
					></i>
				</span>
			
			</span>
		</el-tree>

    </el-tab-pane>
    <!-- <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
  </el-tabs>

  <br>

<!--  -->


<!--   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>



<el-dialog
  title="编辑角色"
  :visible.sync="roleDialogVisible"
  width="530px">
  
  	<el-form ref="form" :rules="rules" :model="form" label-width="100px">

		<el-form-item label="角色名称：" prop="role_name" >
			<el-input v-model="form.role_name" style="width:370px;"></el-input>
		</el-form-item>

		<el-form-item >
			<!-- <el-button @click="roleDialogVisible = false">取 消</el-button>
    		<el-button type="primary" @click="save">保 存</el-button>-->

    		<el-row style="width:370px;">
			  <el-col :span="12">
			  	<el-button type="primary" @click="save"
			  	style="width:100px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
			  	>
					保 存
				</el-button>
			  	
			  </el-col>
			  <el-col :span="12" class="text-right">
			  	<el-button @click="roleDialogVisible = false"
			  	style="width:100px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1); color:#fff;"
			  	>取 消</el-button>
			  </el-col>
			</el-row>
		</el-form-item>

	</el-form>
 
</el-dialog>



<el-dialog
  title="创建角色"
  :visible.sync="roleDialogVisible1"
  width="530px">
  
	<el-form ref="form1" :model="form1" :rules="rules1" label-width="120px"
	>

	  <el-form-item label="角色名称：" prop="role_name" >
	    <el-input v-model="form1.role_name" style="width:330px;"></el-input>
	  </el-form-item>

	  <el-form-item label="角色ID：" prop="role_id" >
	    <el-input v-model="form1.role_id" style="width:330px;"></el-input>
	  </el-form-item>

	</el-form>

	<el-row class="text-center mt30 mb30">
		<el-button type="primary" @click="save1()"
	    style="width:160px;background:#19a65b;border:1px solid #1fe77c;"
	    >立即创建</el-button>
	</el-row>

 
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'test',
	
	data () {
		return {
		  	roleList : [],

		  	systemList : [],

		  	menuDialogVisible : false,

		  	treedata : [],

		  	role_id : '',

		  	roleDialogVisible : false,
		  	roleDialogVisible1 : false,

		  	form : {},
		  	form1 : {},

		  	rules: {
				role_name: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
				],
			},

			rules1: {
				role_name: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				],
				role_id: [
					{ required: true, message: '请输入角色id', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				],
			},

			current : {},

		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.$http({
				fun : 'roleList',
				cb : res => {
					console.log(res);
					this.roleList = res;
				}
			});
		},

		menu (item, id) {
			console.log(item);
			console.log(id);
			this.current = item;

			this.role_id = '';

			this.$http({
				fun : 'getMenuForRole',
				role_id : id,
				cb : res => {
					console.log(res);
					const result = this.$util.transData(res, 'id', 'parent_id', 'children');

					console.log(result);
					this.treedata = result[0].children;
					this.role_id = id;
					this.menuDialogVisible = true;
				}
			});

		},

		handleNodeClick(item) {
	        console.log(item);

	        let para = {
	        	fun : 'setMenuForRole',
	        	role_id : this.role_id,
	        	cb : res => {
	        		this.$message.success('操作成功');
	        		this.menu(this.current, this.role_id);
	        	}
	        };

	        //已经有这个菜单的权限
	        if(item.state == '1'){
	        	para['id'] = item.id;
	        	para['type'] = '1';
	        }else{	//没有这个菜单的权限。
	        	para['id'] = item.parent_ids + item.id;
	        	para['type'] = '0';
	        }

	        this.$http(para);
	    },


	    del (id) {
	    	this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'deleteRole',
	        		role_id : id,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });

	    },

	    edit (item) {
	    	this.form = Object.assign({},item)
	    	this.roleDialogVisible = true;
	    },

	    save () {
	    	this.$refs['form'].validate((valid) => {
	          if (valid) {
	            this.$http({
		    		fun : 'createRole',
		    		...this.form,
		    		cb : res => {
		    			console.log(res);
		    			this.$message.success('操作成功');
		    			this.roleDialogVisible = false;
		    			this.init();
		    		},
		    		err : res => {
		    			this.$message.error(res);
		    		}
		    	});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	    	
	    },


	    add () {
	    	this.roleDialogVisible1 = true;
	    },


	    save1 () {
	    	this.$refs['form1'].validate((valid) => {
	          if (valid) {
	            this.$http({
					fun : 'createRole',
					role_name : this.form1.role_name,
					role_id : this.form1.role_id,
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.roleDialogVisible1 = false;
						this.init();
					}
				});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	    },
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
